'use client';
import { useMemo } from 'react';
import { ConfigProvider, theme, App } from 'antd';
import zhCN from 'antd/locale/zh_CN';

import { useDebugEnv } from '@/hooks';
import { ModalRoot } from '../ui/modal';

import { StoreProvider, type TContext } from './store';

import { ViewScaleManager } from './view-scale-manager';
import { WidgetRender, TWidgetRenderProps } from './widgets';

type TProps = {
    screen?: string;
    className?: string;
    designWidth?: number;
    designHeight?: number;

    mode?: 'scaleX' | 'scaleY' | 'cover';

    enableCustomWidgetRender?: boolean;
    getWidgets?: TWidgetRenderProps['getWidgets'];

    enableSearchGroupFilter?: TContext['env']['enableSearchGroupFilter'];
};

const LargeScreenStage: React.FC<React.PropsWithChildren<TProps>> = (props) => {
    const { enableCustomWidgetRender = false } = props;

    const isDebug = useDebugEnv();

    const envSettings = useMemo(() => {
        return {
            enableSearchGroupFilter: props.enableSearchGroupFilter ?? false,
        };
    }, [props.enableSearchGroupFilter]);

    return (
        <ConfigProvider
            prefixCls='fedx-ui'
            theme={{
                algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
            }}
            locale={zhCN}
        >
            <App className={`large-screen-stage-root ${isDebug ? 'large-screen-stage-debug' : ''}`}>
                <style>
                    {`
                        .large-screen-stage-root{
                            height: 100%;
                            overflow: hidden;
                        }
                    `}
                </style>
                <ViewScaleManager
                    viewportClassName={`screen-viewport ${props.screen ?? ''}`}
                    containerClassName={props.className}
                    viewportWidth={isDebug ? props.designWidth : '100%'}
                    viewportHeight={isDebug ? props.designHeight : '100%'}
                    designWidth={props.designWidth}
                    designHeight={props.designHeight}
                    mode={props.mode ?? 'scaleX'}
                >
                    <StoreProvider envSettings={envSettings}>
                        {/* children */}
                        {props.children}
                        {!enableCustomWidgetRender && <WidgetRender getWidgets={props.getWidgets} />}
                    </StoreProvider>
                    <ModalRoot />
                </ViewScaleManager>
            </App>
        </ConfigProvider>
    );
};

export {
    //
    LargeScreenStage,
};
